<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">
<head th:replace="dashboard/header :: header"></head>
<body>
	<div layout:fragment="content">
	
		<style type="text/css">
			.icons-project:hover {
				background: #f5f5f5 ;
				color: #02619a ;
				text-decoration: none;
				border-radius:2px;
			}
			.icons-project {
				float: left;
				margin-top: 10px;	
			}
			.icons-project i {
				font-size: 30px;
				margin: 5px;
				padding: 2px;
				border: 2px solid transparent;
				vertical-align: middle;
				width: 40px;
				text-align: center;
			}
			.col-click {
				background: #f5f5f5 ;
				color: #02619a;
				text-decoration: none;
				border-radius:2px;
			}
			.fontawesome-icon-list{
				padding:10px;
				margin-top:0px ;
			}
		</style>	
		
		<!-- 定义变量 -->		
        <th:block th:with="conItems=${
           {{'fas fa-eye-dropper'},
			{'fab fa-500px'},
			{'fab fa-accessible-icon'},
			{'fab fa-accusoft'},
			{'fab fa-acquisitions-incorporated'},
			{'fas fa-ad'},
			{'fas fa-address-book'},
			{'far fa-address-book'},
			{'fas fa-address-card'},
			{'far fa-address-card'},
			{'fas fa-adjust'},
			{'fab fa-adn'},
			{'fab fa-adobe'},
			{'fab fa-adversal'},
			{'fab fa-affiliatetheme'},
			{'fas fa-air-freshener'},
			{'fab fa-airbnb'},
			{'fab fa-algolia'},
			{'fas fa-align-center'},
			{'fas fa-align-justify'},
			{'fas fa-align-left'},
			{'fas fa-align-right'},
			{'fab fa-alipay'},
			{'fas fa-allergies'},
			{'fab fa-amazon'},
			{'fab fa-amazon-pay'},
			{'fas fa-ambulance'},
			{'fas fa-american-sign-language-interpreting'},
			{'fab fa-amilia'},
			{'fas fa-anchor'},
			{'fab fa-android'},
			{'fab fa-angellist'},
			{'fas fa-angle-double-down'},
			{'fas fa-angle-double-left'},
			{'fas fa-angle-double-right'},
			{'fas fa-angle-double-up'},
			{'fas fa-angle-down'},
			{'fas fa-angle-left'},
			{'fas fa-angle-right'},
			{'fas fa-angle-up'},
			{'fas fa-angry'},
			{'far fa-angry'},
			{'fab fa-angrycreative'},
			{'fab fa-angular'},
			{'fas fa-ankh'},
			{'fab fa-app-store'},
			{'fab fa-app-store-ios'},
			{'fab fa-apper'},
			{'fab fa-apple'},
			{'fas fa-apple-alt'},
			{'fab fa-apple-pay'},
			{'fas fa-archive'},
			{'fas fa-archway'},
			{'fas fa-arrow-alt-circle-down'},
			{'far fa-arrow-alt-circle-down'},
			{'fas fa-arrow-alt-circle-left'},
			{'far fa-arrow-alt-circle-left'},
			{'fas fa-arrow-alt-circle-right'},
			{'far fa-arrow-alt-circle-right'},
			{'fas fa-arrow-alt-circle-up'},
			{'far fa-arrow-alt-circle-up'},
			{'fas fa-arrow-circle-down'},
			{'fas fa-arrow-circle-left'},
			{'fas fa-arrow-circle-right'},
			{'fas fa-arrow-circle-up'},
			{'fas fa-arrow-down'},
			{'fas fa-arrow-left'},
			{'fas fa-arrow-right'},
			{'fas fa-arrow-up'},
			{'fas fa-arrows-alt'},
			{'fas fa-arrows-alt-h'},
			{'fas fa-arrows-alt-v'},
			{'fab fa-artstation'},
			{'fas fa-assistive-listening-systems'},
			{'fas fa-asterisk'},
			{'fab fa-asymmetrik'},
			{'fas fa-at'},
			{'fas fa-atlas'},
			{'fab fa-atlassian'},
			{'fas fa-atom'},
			{'fab fa-audible'},
			{'fas fa-audio-description'},
			{'fab fa-autoprefixer'},
			{'fab fa-avianex'},
			{'fab fa-aviato'},
			{'fas fa-award'},
			{'fab fa-aws'},
			{'fas fa-baby'},
			{'fas fa-baby-carriage'},
			{'fas fa-backspace'},
			{'fas fa-backward'},
			{'fas fa-bacon'},
			{'fas fa-bahai'},
			{'fas fa-balance-scale'},
			{'fas fa-balance-scale-left'},
			{'fas fa-balance-scale-right'},
			{'fas fa-ban'},
			{'fas fa-band-aid'},
			{'fab fa-bandcamp'},
			{'fas fa-barcode'},
			{'fas fa-bars'},
			{'fas fa-baseball-ball'},
			{'fas fa-basketball-ball'},
			{'fas fa-bath'},
			{'fas fa-battery-empty'},
			{'fas fa-battery-full'},
			{'fas fa-battery-half'},
			{'fas fa-battery-quarter'},
			{'fas fa-battery-three-quarters'},
			{'fab fa-battle-net'},
			{'fas fa-bed'},
			{'fas fa-beer'},
			{'fab fa-behance'},
			{'fab fa-behance-square'},
			{'fas fa-bell'},
			{'far fa-bell'},
			{'fas fa-bell-slash'},
			{'far fa-bell-slash'},
			{'fas fa-bezier-curve'},
			{'fas fa-bible'},
			{'fas fa-bicycle'},
			{'fas fa-biking'},
			{'fab fa-bimobject'},
			{'fas fa-binoculars'},
			{'fas fa-biohazard'},
			{'fas fa-birthday-cake'},
			{'fab fa-bitbucket'},
			{'fab fa-bitcoin'},
			{'fab fa-bity'},
			{'fab fa-black-tie'},
			{'fab fa-blackberry'},
			{'fas fa-blender'},
			{'fas fa-blender-phone'},
			{'fas fa-blind'},
			{'fas fa-blog'},
			{'fab fa-blogger'},
			{'fab fa-blogger-b'},
			{'fab fa-bluetooth'},
			{'fab fa-bluetooth-b'},
			{'fas fa-bold'},
			{'fas fa-bolt'},
			{'fas fa-bomb'},
			{'fas fa-bone'},
			{'fas fa-bong'},
			{'fas fa-book'},
			{'fas fa-book-dead'},
			{'fas fa-book-medical'},
			{'fas fa-book-open'},
			{'fas fa-book-reader'},
			{'fas fa-bookmark'},
			{'far fa-bookmark'},
			{'fab fa-bootstrap'},
			{'fas fa-border-all'},
			{'fas fa-border-none'},
			{'fas fa-border-style'},
			{'fas fa-bowling-ball'},
			{'fas fa-box'},
			{'fas fa-box-open'},
			{'fas fa-boxes'},
			{'fas fa-braille'},
			{'fas fa-brain'},
			{'fas fa-bread-slice'},
			{'fas fa-briefcase'},
			{'fas fa-briefcase-medical'},
			{'fas fa-broadcast-tower'},
			{'fas fa-broom'},
			{'fas fa-brush'},
			{'fab fa-btc'},
			{'fab fa-buffer'},
			{'fas fa-bug'},
			{'fas fa-building'},
			{'far fa-building'},
			{'fas fa-bullhorn'},
			{'fas fa-bullseye'},
			{'fas fa-burn'},
			{'fab fa-buromobelexperte'},
			{'fas fa-bus'},
			{'fas fa-bus-alt'},
			{'fas fa-business-time'},
			{'fab fa-buy-n-large'},
			{'fab fa-buysellads'},
			{'fas fa-calculator'},
			{'fas fa-calendar'},
			{'far fa-calendar'},
			{'fas fa-calendar-alt'},
			{'far fa-calendar-alt'},
			{'fas fa-calendar-check'},
			{'far fa-calendar-check'},
			{'fas fa-calendar-day'},
			{'fas fa-calendar-minus'},
			{'far fa-calendar-minus'},
			{'fas fa-calendar-plus'},
			{'far fa-calendar-plus'},
			{'fas fa-calendar-times'},
			{'far fa-calendar-times'},
			{'fas fa-calendar-week'},
			{'fas fa-camera'},
			{'fas fa-camera-retro'},
			{'fas fa-campground'},
			{'fab fa-canadian-maple-leaf'},
			{'fas fa-candy-cane'},
			{'fas fa-cannabis'},
			{'fas fa-capsules'},
			{'fas fa-car'},
			{'fas fa-car-alt'},
			{'fas fa-car-battery'},
			{'fas fa-car-crash'},
			{'fas fa-car-side'},
			{'fas fa-caravan'},
			{'fas fa-caret-down'},
			{'fas fa-caret-left'},
			{'fas fa-caret-right'},
			{'fas fa-caret-square-down'},
			{'far fa-caret-square-down'},
			{'fas fa-caret-square-left'},
			{'far fa-caret-square-left'},
			{'fas fa-caret-square-right'},
			{'far fa-caret-square-right'},
			{'fas fa-caret-square-up'},
			{'far fa-caret-square-up'},
			{'fas fa-caret-up'},
			{'fas fa-carrot'},
			{'fas fa-cart-arrow-down'},
			{'fas fa-cart-plus'},
			{'fas fa-cash-register'},
			{'fas fa-cat'},
			{'fab fa-cc-amazon-pay'},
			{'fab fa-cc-amex'},
			{'fab fa-cc-apple-pay'},
			{'fab fa-cc-diners-club'},
			{'fab fa-cc-discover'},
			{'fab fa-cc-jcb'},
			{'fab fa-cc-mastercard'},
			{'fab fa-cc-paypal'},
			{'fab fa-cc-stripe'},
			{'fab fa-cc-visa'},
			{'fab fa-centercode'},
			{'fab fa-centos'},
			{'fas fa-certificate'},
			{'fas fa-chair'},
			{'fas fa-chalkboard'},
			{'fas fa-chalkboard-teacher'},
			{'fas fa-charging-station'},
			{'fas fa-chart-area'},
			{'fas fa-chart-bar'},
			{'far fa-chart-bar'},
			{'fas fa-chart-line'},
			{'fas fa-chart-pie'},
			{'fas fa-check'},
			{'fas fa-check-circle'},
			{'far fa-check-circle'},
			{'fas fa-check-double'},
			{'fas fa-check-square'},
			{'far fa-check-square'},
			{'fas fa-cheese'},
			{'fas fa-chess'},
			{'fas fa-chess-bishop'},
			{'fas fa-chess-board'},
			{'fas fa-chess-king'},
			{'fas fa-chess-knight'},
			{'fas fa-chess-pawn'},
			{'fas fa-chess-queen'},
			{'fas fa-chess-rook'},
			{'fas fa-chevron-circle-down'},
			{'fas fa-chevron-circle-left'},
			{'fas fa-chevron-circle-right'},
			{'fas fa-chevron-circle-up'},
			{'fas fa-chevron-down'},
			{'fas fa-chevron-left'},
			{'fas fa-chevron-right'},
			{'fas fa-chevron-up'},
			{'fas fa-child'},
			{'fab fa-chrome'},
			{'fab fa-chromecast'},
			{'fas fa-church'},
			{'fas fa-circle'},
			{'far fa-circle'},
			{'fas fa-circle-notch'},
			{'fas fa-city'},
			{'fas fa-clinic-medical'},
			{'fas fa-clipboard'},
			{'far fa-clipboard'},
			{'fas fa-clipboard-check'},
			{'fas fa-clipboard-list'},
			{'fas fa-clock'},
			{'far fa-clock'},
			{'fas fa-clone'},
			{'far fa-clone'},
			{'fas fa-closed-captioning'},
			{'far fa-closed-captioning'},
			{'fas fa-cloud'},
			{'fas fa-cloud-download-alt'},
			{'fas fa-cloud-meatball'},
			{'fas fa-cloud-moon'},
			{'fas fa-cloud-moon-rain'},
			{'fas fa-cloud-rain'},
			{'fas fa-cloud-showers-heavy'},
			{'fas fa-cloud-sun'},
			{'fas fa-cloud-sun-rain'},
			{'fas fa-cloud-upload-alt'},
			{'fab fa-cloudscale'},
			{'fab fa-cloudsmith'},
			{'fab fa-cloudversify'},
			{'fas fa-cocktail'},
			{'fas fa-code'},
			{'fas fa-code-branch'},
			{'fab fa-codepen'},
			{'fab fa-codiepie'},
			{'fas fa-coffee'},
			{'fas fa-cog'},
			{'fas fa-cogs'},
			{'fas fa-coins'},
			{'fas fa-columns'},
			{'fas fa-comment'},
			{'far fa-comment'},
			{'fas fa-comment-alt'},
			{'far fa-comment-alt'},
			{'fas fa-comment-dollar'},
			{'fas fa-comment-dots'},
			{'far fa-comment-dots'},
			{'fas fa-comment-medical'},
			{'fas fa-comment-slash'},
			{'fas fa-comments'},
			{'far fa-comments'},
			{'fas fa-comments-dollar'},
			{'fas fa-compact-disc'},
			{'fas fa-compass'},
			{'far fa-compass'},
			{'fas fa-compress'},
			{'fas fa-compress-alt'},
			{'fas fa-compress-arrows-alt'},
			{'fas fa-concierge-bell'},
			{'fab fa-confluence'},
			{'fab fa-connectdevelop'},
			{'fab fa-contao'},
			{'fas fa-cookie'},
			{'fas fa-cookie-bite'},
			{'fas fa-copy'},
			{'far fa-copy'},
			{'fas fa-copyright'},
			{'far fa-copyright'},
			{'fab fa-cotton-bureau'},
			{'fas fa-couch'},
			{'fab fa-cpanel'},
			{'fab fa-creative-commons'},
			{'fab fa-creative-commons-by'},
			{'fab fa-creative-commons-nc'},
			{'fab fa-creative-commons-nc-eu'},
			{'fab fa-creative-commons-nc-jp'},
			{'fab fa-creative-commons-nd'},
			{'fab fa-creative-commons-pd'},
			{'fab fa-creative-commons-pd-alt'},
			{'fab fa-creative-commons-remix'},
			{'fab fa-creative-commons-sa'},
			{'fab fa-creative-commons-sampling'},
			{'fab fa-creative-commons-sampling-plus'},
			{'fab fa-creative-commons-share'},
			{'fab fa-creative-commons-zero'},
			{'fas fa-credit-card'},
			{'far fa-credit-card'},
			{'fab fa-critical-role'},
			{'fas fa-crop'},
			{'fas fa-crop-alt'},
			{'fas fa-cross'},
			{'fas fa-crosshairs'},
			{'fas fa-crow'},
			{'fas fa-crown'},
			{'fas fa-crutch'},
			{'fab fa-css3'},
			{'fab fa-css3-alt'},
			{'fas fa-cube'},
			{'fas fa-cubes'},
			{'fas fa-cut'},
			{'fab fa-cuttlefish'},
			{'fab fa-d-and-d'},
			{'fab fa-d-and-d-beyond'},
			{'fab fa-dashcube'},
			{'fas fa-database'},
			{'fas fa-deaf'},
			{'fab fa-delicious'},
			{'fas fa-democrat'},
			{'fab fa-deploydog'},
			{'fab fa-deskpro'},
			{'fas fa-desktop'},
			{'fab fa-dev'},
			{'fab fa-deviantart'},
			{'fas fa-dharmachakra'},
			{'fab fa-dhl'},
			{'fas fa-diagnoses'},
			{'fab fa-diaspora'},
			{'fas fa-dice'},
			{'fas fa-dice-d20'},
			{'fas fa-dice-d6'},
			{'fas fa-dice-five'},
			{'fas fa-dice-four'},
			{'fas fa-dice-one'},
			{'fas fa-dice-six'},
			{'fas fa-dice-three'},
			{'fas fa-dice-two'},
			{'fab fa-digg'},
			{'fab fa-digital-ocean'},
			{'fas fa-digital-tachograph'},
			{'fas fa-directions'},
			{'fab fa-discord'},
			{'fab fa-discourse'},
			{'fas fa-divide'},
			{'fas fa-dizzy'},
			{'far fa-dizzy'},
			{'fas fa-dna'},
			{'fab fa-dochub'},
			{'fab fa-docker'},
			{'fas fa-dog'},
			{'fas fa-dollar-sign'},
			{'fas fa-dolly'},
			{'fas fa-dolly-flatbed'},
			{'fas fa-donate'},
			{'fas fa-door-closed'},
			{'fas fa-door-open'},
			{'fas fa-dot-circle'},
			{'far fa-dot-circle'},
			{'fas fa-dove'},
			{'fas fa-download'},
			{'fab fa-draft2digital'},
			{'fas fa-drafting-compass'},
			{'fas fa-dragon'},
			{'fas fa-draw-polygon'},
			{'fab fa-dribbble'},
			{'fab fa-dribbble-square'},
			{'fab fa-dropbox'},
			{'fas fa-drum'},
			{'fas fa-drum-steelpan'},
			{'fas fa-drumstick-bite'},
			{'fab fa-drupal'},
			{'fas fa-dumbbell'},
			{'fas fa-dumpster'},
			{'fas fa-dumpster-fire'},
			{'fas fa-dungeon'},
			{'fab fa-dyalog'},
			{'fab fa-earlybirds'},
			{'fab fa-ebay'},
			{'fab fa-edge'},
			{'fas fa-edit'},
			{'far fa-edit'},
			{'fas fa-egg'},
			{'fas fa-eject'},
			{'fab fa-elementor'},
			{'fas fa-ellipsis-h'},
			{'fas fa-ellipsis-v'},
			{'fab fa-ello'},
			{'fab fa-ember'},
			{'fab fa-empire'},
			{'fas fa-envelope'},
			{'far fa-envelope'},
			{'fas fa-envelope-open'},
			{'far fa-envelope-open'},
			{'fas fa-envelope-open-text'},
			{'fas fa-envelope-square'},
			{'fab fa-envira'},
			{'fas fa-equals'},
			{'fas fa-eraser'},
			{'fab fa-erlang'},
			{'fab fa-ethereum'},
			{'fas fa-ethernet'},
			{'fab fa-etsy'},
			{'fas fa-euro-sign'},
			{'fab fa-evernote'},
			{'fas fa-exchange-alt'},
			{'fas fa-exclamation'},
			{'fas fa-exclamation-circle'},
			{'fas fa-exclamation-triangle'},
			{'fas fa-expand'},
			{'fas fa-expand-arrows-alt'},
			{'fab fa-expeditedssl'},
			{'fas fa-external-link-alt'},
			{'fas fa-external-link-square-alt'},
			{'fas fa-eye'},
			{'far fa-eye'},
			{'fas fa-eye-dropper'},
			{'fas fa-eye-slash'},
			{'far fa-eye-slash'},
			{'fab fa-facebook'},
			{'fab fa-facebook-f'},
			{'fab fa-facebook-messenger'},
			{'fab fa-facebook-square'},
			{'fas fa-fan'},
			{'fab fa-fantasy-flight-games'},
			{'fas fa-fast-backward'},
			{'fas fa-fast-forward'},
			{'fas fa-fax'},
			{'fas fa-feather'},
			{'fas fa-feather-alt'},
			{'fab fa-fedex'},
			{'fab fa-fedora'},
			{'fas fa-female'},
			{'fas fa-fighter-jet'},
			{'fab fa-figma'},
			{'fas fa-file'},
			{'far fa-file'},
			{'fas fa-file-alt'},
			{'far fa-file-alt'},
			{'fas fa-file-archive'},
			{'far fa-file-archive'},
			{'fas fa-file-audio'},
			{'far fa-eye-slash'}}
		 }">

		<div class="container-fluid">
			<div class="animated fadeIn">
				<div class="row">
					<div class="col-lg-12">
						<div class="row fontawesome-icon-list"> 
						   <div class="fa-hover icons-project" th:each="i:${conItems}">
						   		<i th:src="@{${i[0]}}" th:class="@{${i[0]}}"></i>
						   </div> 
						 </div>	
					</div>
				</div>
			</div>
		</div>
	</div>
		
	<input type="hidden" id="selectResourceParentNode" />

	<script th:src="@{/asserts/js/jquery.min.js}"></script>
	<script type="text/javascript">
		$(function(){
		
			$("div.fa-hover").click(function(){
				var c = $(this).find("i").attr("src") ; 
				
				$(this).addClass("col-click") ; 
				$(this).siblings().removeClass("col-click");
				
				$("input[id=selectResourceParentNode]").attr("src" ,c) ; 
				
				// $("input[id=selectResourceParentNode]").attr("data-id" ,c) ; 
				//$("input[id=selectResourceParentNode]").attr("data-name" ,c) ; 
			}) ;
		}) ;	 
	</script>
</body>
</html>
